<template>
	<view class="page">
		<view style="background: #fff;">
			<u-navbar :is-back="false" title=" ">
				<view class="slot-wrap">
					<view class="search" @click="search()">
						<image src="@/static/index/search.png"></image>
						<text>请输入搜索关键词</text>
					</view>
				</view>
			</u-navbar>
			<u-swiper :height="375" :list="banner" name="picUrl" @click="swiper"></u-swiper>
			<view class="container" v-if="sysConfig.videoImg">
				<view class="title m-b-20">企业介绍</view>
				<image class="video-img" :src="sysConfig.videoImg" @click="video()"></image>
			</view>

			<view class="container">
				<view class="title m-b-20">品牌分类</view>
				<view class="brand-box">
					<view class="brand" v-for="(item, index) of brandList" :key="index" @click="searchList(item)">
						<!-- <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></image> -->
						<image   :src="item.brandUrl"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="container">
			<view class="title m-b-20">热销商品</view>
			<view class="good-box">
				<view class="good" v-for="(item, index) of shoppList" :key="index" @click="goodDetailed(item)">
					<image class="good-img " mode="aspectFill" :src="item.picUrl"></image>
					<view class="introduce-box">
						<view class="name m-b-20">{{ item.itemTitle }}</view>
						<view >
							<view class="flex-space-between">
								<view class="price" v-if="item.minSalePrice != 0">¥{{ (item.minSalePrice / 100).toFixed(2) }}</view>
								<view class="price" v-else>价格待定,到店详询</view>
								<view class="sold">已售{{ item.saleNum }}件</view>
							</view>
							<view class="flex-space-between m-t-10" >
								<view class="price" v-if="item.minVipPrice != 0"> ¥{{ (item.minVipPrice / 100).toFixed(2) }}</view>
								<view class="price" v-else>价格待定,到店详询</view>
								<view class="sold">VIP价格</view>
							</view>
							<view class="flex-space-between m-t-10" v-if="[2,1000].includes(role)">
								<view class="price" v-if="item.minShopPrice != 0"> ¥{{ (item.minShopPrice / 100).toFixed(2) }}</view>
								<view class="price" v-else>价格待定,到店详询</view>
								<view class="sold">股东投资人价</view>
							</view>
							<view class="flex-space-between m-t-10" v-if="[3,1000].includes(role)">
								<view class="price" v-if="item.minAgentPrice != 0"> ¥{{ (item.minAgentPrice / 100).toFixed(2) }}</view>
								<view class="price" v-else>价格待定,到店详询</view>
								<view class="sold">股东价</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<!-- 	<view class="btm">
			<view>
				<text>地址：广东省揭阳市惠来县溪西镇溪西派出所西侧200米蒙娜丽莎瓷砖(S337店)北溪生企业</text>
				<text>联系电话：18824438138</text>
			</view>
			<view>
				联系邮箱：13729303386@163.com
			</view>
			<view>联系QQ：3688849513</view>
			<view>版权所有© [北溪生企业] [2024]-[2024]。本网站的全部内容，包括但不限于文本、图像、图形、音频和视频，均受法律保护，严禁未经许可擅自使用</view>
			<a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2024280838号-1</a>
		</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
import {
	bannerList,
	brandList,
	goodsList,
} from '@/common/api/index';
import {
	userInfo,
	sysConfig
} from '@/common/api/my';
export default {
	data() {
		return {
			keyword: '',
			shopproductinfoPage: {
				page: 0,
				size: 10,
			},
			endPage: false,
			banner: [], //轮播图
			brandList: [],//品牌列表
			shoppList: [], //商品列表
			sysConfig: {
				VideoImg: '',
			},
			role:0,
		}
	},
	onLoad() {
		this.bannerLists()
		this.brandLists()
		this.goodsLists()
		this.getSysConfig()
	},
	onShow() {
		if (this.$store.state.user.userInfo.token) {
			this.info()
		}else{
			this.role = 0
		}
	},
	methods: {
		// 用户信息
		info() {
			userInfo({}).then(res => {
				if (res.code === 200) {
					this.role = res.data.role
					this.$store.commit("user/SET_USER_INFO", res.data)
				}
			})
		},

		// 配置项
		getSysConfig() {
			sysConfig({}).then(res => {
				if (res.code === 200) {
					this.sysConfig = res.data
				}
			})
		},

		// 轮播图接口
		bannerLists() {
			bannerList().then(res => {
				if (res.code === 200) {
					this.banner = res.data.list
				}
			})
		},

		// 品牌列表接口
		brandLists() {
			brandList(this.shopproductinfoPage).then(res => {
				if (res.code === 200) {
					this.brandList = res.data.list
				}
			})
		},

		// 商品列表接口
		goodsLists() {
			goodsList(this.shopproductinfoPage).then(res => {
				if (res.code === 200) {
					this.shoppList = this.shoppList.concat(res.data.list || [])
					this.endPage = res.data.endPage
				}
			})
		},

		search() {
			uni.navigateTo({
				url: `/subPackages/index/search/index`
			})
		},


		swiper(index) {
			if (this.banner[index].linkUrl == 0) return
			uni.navigateTo({
				url: `/subPackages/index/goodDetailed/index?id=${this.banner[index].linkUrl}`
			})
		},

		searchList(item) {
			uni.navigateTo({
				url: `/subPackages/index/searchList/index?brandId=${item.id}&brandName=${item.brandName}`
			})
		},

		// 商品列表事件
		goodDetailed(item) {
			uni.navigateTo({
				url: `/subPackages/index/goodDetailed/index?id=${item.id}`
			})
		},

		video() {
			uni.navigateTo({
				url: `/subPackages/index/video/index`
			})
		},

		//下拉刷新
		onPullDownRefresh() {
			this.shopproductinfoPage.page = 0
			this.shoppList = []
			this.bannerLists()
			this.brandLists()
			this.goodsLists()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		},

		//上拉加载
		onReachBottom() {
			if (this.endPage) return
			uni.showLoading({
				title: `加载中`
			});
			this.shopproductinfoPage.page++
			this.goodsLists()
			setTimeout(() => {
				uni.hideLoading()
			}, 500);
		},
	}
}
</script>

<style lang="scss" scoped>
::v-deep .slot-wrap {
	flex: 1;
	z-index: 99999999;
}

.search {
	flex: 1;
	height: 70rpx;
	margin: 36rpx 50rpx 20rpx 30rpx;
	background: #F8F8F8;
	border-radius: 40rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #CCCCCC;
	display: flex;
	align-items: center;
	padding: 0rpx 23rpx;
	box-sizing: border-box;
	z-index: 99999999;

	image {
		width: 29rpx;
		height: 29rpx;
		margin-right: 20rpx;
	}
}

.container {
	padding: 30rpx;
	box-sizing: border-box;
}

.video {
	width: 690rpx;
	height: 400rpx;
}

.brand-box {
	display: flex;
	flex-wrap: wrap;

	.brand {
		width: 162rpx;
		height: 162rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		border: 1rpx solid #c1c1c1;
		overflow: hidden;

		image {
			width: 162rpx;
			height: 162rpx;
		}
	}

	.brand:nth-child(4n) {
		margin-right: 0;
	}
}

.good-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.good {
		width: 330rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction:column;

		.good-img {
			width: 100%;
			height: 345rpx;
		}

		.introduce-box {
			flex: 1;
			padding: 10rpx 20rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction:column;
			justify-content: space-between;

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #222222;
				text-align: left;
				font-style: normal;
				word-wrap: break-word;
				word-break: normal;
			}

			.price {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #9E1115;
				font-style: normal;
			}

			.sold {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #777777;
				font-style: normal;
			}
		}
	}

	.good:nth-child(odd) {
		margin-right: 20rpx;
	}
}

.video-img {
	width: 690rpx;
	height: 400rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	
}


.btm {
	background-color: #292d38;
	color: #ffffff;
	padding: 10rpx;
	margin: 50rpx auto 0;
	text-align: center;
	line-height: 40rpx;

	text {
		margin: 0rpx 10rpx;
	}

	a {
		color: #ffffff;
	}
}
</style>